import React from 'react';

import {ReactComponent as CheckIcon} from './Icons/check.svg';
import {ReactComponent as CrossIcon} from './Icons/cross.svg';
import {ReactComponent as UpArrowIcon} from './Icons/up-arrow.svg';
import {ReactComponent as DownArrowIcon} from './Icons/down-arrow.svg';
import {ReactComponent as ModifyIcon} from './Icons/modify.svg';

import './edit-cell.css';

const EditButton = ({children, onClick}) => {
  return <div className="edit-button" onClick={onClick}>{children}</div>
}

export default ({rowIndex, width, editDisabled, editing, toggleEditing, remove, moveBack, moveFore, openEdit, saveEdit}) => {

  const handler = (op) => (e) => {
    e.preventDefault();
    e.stopPropagation();
    op(rowIndex);
  }

  const toggle = (index) => {
    if (editing) {
      console.log('SAVE EDIT!');
      saveEdit(index);
    } else {
      openEdit(index);
    }
    toggleEditing();
  }

  let editButtons = editDisabled
    ? [
        [ModifyIcon, toggle],
      ]
    : [
        [ModifyIcon,        toggle],
        [UpArrowIcon,       moveBack],
        [DownArrowIcon,     moveFore],
        [CrossIcon,         remove],
      ]

  const buttons = !editing 
    ? editButtons.map(([E, op=() => {console.log('noop')}], key) => {
      return <EditButton {...{key, onClick: handler(op)}}><E/></EditButton>
    })
    : <EditButton onClick={handler(toggle)}>
        <CheckIcon />
      </EditButton>

  return <div style={{width}} className='edit-button-line'>
    {buttons}
  </div>

}